<script setup lang="ts">
import {ref} from "vue";
import {useElementSize} from "@vueuse/core";

import HomeTop from "@/views/home/component/HomeTop.vue";
import HomeHotSearch from "@/views/home/component/HomeHotSearch.vue";
import HomeAudio from "@/views/home/component/HomeAudio.vue";

const rowRef = ref()
const {height} = useElementSize(rowRef)

</script>
<template>
  <div ref="rowRef" class="flex-grow-1 relative">
    <el-row :gutter="5" class="mx3 home-row">
      <el-col :span="24">
        <HomeTop/>
      </el-col>
      <el-col :span="12">
        <div class="div-item w100 e-border border-radius animate__animated animate__fadeInLeft text-center"
             :style="{height: `${height - 65}px`}">
          <HomeAudio/>
        </div>
      </el-col>
      <el-col :span="12" class="h100">
        <div class="div-item w100 e-border border-radius animate__animated animate__fadeInRight"
             :style="{height: `${height - 65}px`}">
          <HomeHotSearch class="search"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss">
.div-item {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 4px;
}

.home-row {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
</style>
